<template>
  <div class="card-wrap">
    <Title>
      <template #content>
        <p class="title">库存统计</p>
        <span style="color: #999">(实时数据)</span>
        <icon-double-right style="color: #999; margin-left: 5px; font-size: 16px" />
      </template>
    </Title>
    <p class="time">更新时间：2023-09-10 12:34</p>
    <a-button-group class="type-w" size="small">
      <a-button class="group-item"> 国内仓 </a-button>
      <a-button class="group-item"> FBA仓 </a-button>
      <a-button class="group-item"> 海外仓 </a-button>
    </a-button-group>
    <div class="flex">
      <InventoryChartItem v-for="(item, i) in targetList" :key="i" :targetList="item" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Title from './Title.vue'
  import InventoryChartItem from './InventoryChartItem.vue'
  const targetList = [
    [
      {
        tip: '指在仓库的产品总数量',
        name: '在库总数',
        value: 6000,
        key: '1',
      },
      {
        tip: '指在仓库的产品总数量',
        name: '在途总数',
        value: 3000,
        key: '1',
        line: 10,
      },
    ],
    [
      {
        tip: '指在仓库的产品总数量',
        name: '在库总货值',
        value: 30000,
        key: '3',
        unit: '$',
      },
      {
        tip: '指在仓库的产品总数量',
        name: '在途总货值',
        value: 20000,
        key: '4',
        unit: '$',
      },
    ],
  ]
</script>

<style lang="less" scoped>
  .time {
    margin: 10px 0 20px;
    color: #999;
  }
  .arco-btn-group {
    border: 1px solid var(--color-secondary-hover);
  }
  .group-item {
    background-color: #fff;
    line-height: 28px;
    &:hover {
      background-color: #fff;
      color: rgb(var(--primary-6));
    }
  }
  .type-w {
    position: absolute;
    right: 10px;
    top: 10px;
  }
</style>
